import React from "react";
import { connect } from "react-redux";

class App extends React.Component {
    render() {
        const { count, dispatch } = this.props;
        return (
            <div>
                <Son1 count={count} dispatch={dispatch}></Son1>
                <hr />
                <Son2 count={count} dispatch={dispatch}></Son2>
            </div>
        );
    }
}

function Son1(props) {
    const { count, dispatch } = props;
    return (
        <div>
            <h3>Son1</h3>
            <p>count:{count}</p>
            <button
                onClick={() => {
                    dispatch({ type: "add", payload: 20 });
                }}>
                count + 20
            </button>
        </div>
    );
}
function Son2(props) {
    const { count, dispatch } = props;
    return (
        <div>
            <h3>Son2</h3>
            <p>count:{count}</p>
            <button
                onClick={() => {
                    dispatch({ type: "add", payload: 100 });
                }}>
                count + 100
            </button>
        </div>
    );
}

export default connect((state) => {
    return { ...state };
})(App);
